У 


СИНИЙ свет — зеленый свет: 
релизим без даунтаимов 


Николай ТИХОНОВ 


Frontend 
FC Conf 2022 
« 


1 


| 
Часть, где вь поднимаєте руки 


Коля ТИХОНОВ 
-Әрөнғендер? 


potatocat.dev/tg 


me@potatocat.dev 


Что говоритБ 
про FrontOps? (2) 


Можно продать бизнесу 


Улучшаюшее продукт 


Недооцененное 


Можно (относительно) быстро 
внедрить 


Релизь с даунтаимом существуют. 


Все еще. 


14:24 4 Ф 4i 255% 


Notification (S 


Information about planned technical maintenances iy 


Today 11:50 AM 
Hello, 


In order to improve the service, on August 11, from 23:30 to 
00:00 it is scheduled to conduct maintenance work, therefore 


the usage of ill be limited. 


We apologize for the inconvenience. 


Зачем мне blue-green? 


Повысить доступность 


На аптайм сервиса больше не 
влияют релизы 


Получить ещё окружение 
Тестирование на проде 
без побочных эффектов 


Поиграться с Ор5 


Т-шейпинг и всё такое 


Душнилово запрещаєтся! 


ии кот жестб 


= 


Message Edit profile 
What | do 
Junior Frontend SDE 


Display name 


Ваше маленький KOT жестб 


Тіте гопе 
21:18 local time 


Email address 
kotik@potatocat.dev 


ДолжностБ 
Junior Frontend SDE 


Мудрый кот 


Message Edit profile 


What І do 
Lead Frontend SDE 


Display name 
Большой Kor 


Time zone 
23:12 local time 


Email address 
kotek@potatocat.dev 


Должность 
Lead Frontend SDE 


Знакомьтесь: 
главные герои 


Котики, которые разрабатьвают 
невероятные фронтенды для кошачьего 
банка 


Большой Кот 23:14 


А давай ты сегодня попробуешь порелизить? 


Ваще маленький кот жестб 23:15 


+. 12605 


Ваше маленький кот жестб 00:01 
РИМ (доБольшои Кот я походу прод сломал, помоги пожалуйста о 


Большой Кот 00:01 


мда 


Release Bot АРР 00:03 


__[» 
е 


| (аБольшои Кот успешно откатил продакшен до версии поменьше 


Постмортем 


Недостаточное покрьтие тестами 


Тести продсильно отличаются 


Нестабильная инфраструктура 


Простая человеческая 
кошачья ошибка 


Ваше маленький кот жестб 00:04 


Ж Эх, вот бы у нас был второй прод, который я бы мог ломать 


1 


| 
Blue-green to the rescue! 


И как оно работает? 


Ргодисбіоп 


Иконки с Flaticon.com 


И как оно работает? 


Ргодисбіоп 


Иконки с Flaticon.com 


Production 
(but better) 


И как оно работает? 


Иконки C Flaticon.com 


И как оно работает? 


Production Staging 


Иконки C Flaticon.com 


И как оно работает? 


Production 


dA У 
Балансировщик 


Иконки C Flaticon.com 


Staging 


И как оно работает? 


Балансировщик 


Иконки C Flaticon.com 


И как оно работает? 


=== Арр Version = 1 
Tg 
i Green 


конки C Flaticon.co 


ралансировщик 


И как оно работает? 


=== Арр Version = 3 
== 09 
Blue — 


конки C Flaticon.co 


ралансировщик 


И как оно работает? 


App Version = 2 App Version - З 


Балансировщик 


Иконки C Flaticon.com 


И как оно работает? 


App Version = 2 App Version - З 


Балансировщик 


Иконки C Flaticon.com 


И как попасть на стейджинг? 


App Version = 2 App Version - З 


Балансировщик 


Иконки с Flaticon.com 


И как попасть на стейджинг? 


App Version = 2 App Version - З 


[=== оо. [=== 00. 
Вие Green 


"d Q 


Балансировщик 


Иконки с Flaticon.com 


Откаты мгновенны 


> Release Bot APP 01:56 
* я 

| Switch успешно завершен за 2 секундБ! 
Кот Отвечающий За Продуктовое 01:56 

` Вы чего нарелизили? 


| Большой Кот 01:56 
Ой 


Release Bot АРР 01:57 


x 


| Switch успешно завершен за 3 секунды 


Release bot АРР 09:19 
| Switch успешно завершен 3a З секунды 


| 
Oy 


" 


A Alert Tracker APP 09:32 
| Чет у пользователеи 404... 


Adi. Большой Кот 09:32 


Es. 


откатывай 


5 Release Bot APP 09:37 
: | Switch успешно завершен за 3 секунды 


A Alert Tracker APP 09:34 
| 404 еще больше стало... 


кэширование 


или lazyload 


Ж 


4 


УМ 
کے‎ 


Ез 


О 
со) 


носните 
ma 


CDN 


Тебе не нужно думать о старои статике, 
если она всегда доступна 


Хранилище статики 
Не нашли файл на проде? 
Балансировщик попробуєт поискать там 


жесткаа перезагрузка 
Чтобы пользователи точно были 
на текущем проде (не очень) 


Окраска запросов 
Мы точно знаем, куда идти 
(тоже не очень) 


Backend-for-Frontend без запар с контрактами 


Релизим все сразу 


Вие 
e === Blue 


Балансировщик 


Иконки C Flaticon.com 


Релизим все сразу 


" 


^ 


/ 
Prod --- Blue / 
І 
І 


FAJ 


Балансировщик 


Релизим все сразу 


тыш, 


~ 
% 
и Prod === Green 
1 


FAJ 


Балансировщик 


= 
Га 


Крутой кот 10:14 
Я тут про сапагу вычитал, го внедрим? 


Большой Кот 10:15 


Staging 


Canary? 


Production 


Балансировщик 


конки с Flaticon.com 


Сапагу? 


Production Staging 


Балансировщик 


Иконки с Flaticon.com 


Сапагу? 


Ргодисбіоп 


Staging 


(222 со 
- —> (=== 90) 


Балансировщик 


Сапагу? 


Ргодисбіоп 


Staging 


(222 со 
- —> (=== 90) 


Балансировщик 


Сапагу? 


Ргодисбіоп 


Staging 


(222 со 
- —> (=== 90) 


Балансировщик 


Сапагу? 


Ргодисбіоп 


Staging 


(222 со 
- —> (=== 90) 


Балансировщик 


НО. ЭТО УЉЕ 


Демо 


Почти-почти 


ZX 


= Обертка or Google поверх JS, 


которая позволяет не-учить-Ваза 


легко писать скрипты 


await $ cat package.json | grep Gtinkoff ` 


await Promise.all([ 
$' sleep 1; echo 1`, 
$ sleep 2; echo 2”, 
$ ` sleep 3; echo 3°, 
1) 


const name - 'foo bar' 
await fs.ensureDir(mkdir |ітр/біпатеі) 


ZX умеет передавать команды B ОС, 
а еще He импортировать всякие fs, path, 
OS и прочее 


NGINX 


= Очень мощный инструмент для 
настроики проксирования 
и раздачи статики 


server 1 
listen 80; 
server. name tinkoff.ru; 


location | 1 
root /usr/share/nginx/html; 
index index.html; 
| 
| 


Рекомендую к изучению 
всем фронтендерам: с ним точно 
не пропадете 


Демо 


Материалы Оцените доклад! 


Николай Тихонов | Teamlead 


me@potatocat.dev +7 (999) 137-38-42 


